<template>
  <div class="hello">
    <h3>{{ title }}</h3>
    <!-- <ul>
      <li>xxx</li>
    </ul> -->
    <slot></slot>
    <slot name="footer">插槽1</slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  background-color: aqua;
  width: 200px;
  height: 300px;
  text-align: c;
}
h3 {
  background-color: orange;
  text-align: center;
}
.hello {
  float: left;
  margin: 10px;
}
img {
  width: 200px;
  height: 200px;
}
video {
  width: 100%;
}

</style>
